<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="assets/css/blog.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    </script>
</head>
<body>
	<div id="bigBox">
    </div>
    <div th:include="pub_head"></div>

    <div class="ccenter">
        <div style="text-align: center;height: 100px;justify-content: center;font-size: 20px">
            <span onclick="a(-1)" class="page_span">上一页</span>
            当前页码: <span id="yema" style="font-weight: bold">1</span>
            <span onclick="a(+1)" class="page_span">下一页</span>
        </div>
      <div class="centers">
        <div class="centerLeft">
          <div class="centerleftOne" th:each="user:${modules[8].banners}">
            <a th:href="@{/page(id=${user.id})}"><img th:src="${user.imgUrl1}" /></a>
            <p class="p3">[[${user.title}]]</p>
            <p>[[${user.description}]]</p>
            <p>[[${user.b1}]]<span>[[${user.b2}]]</span></p>
          </div>
            <!--分页-->
        </div>


        <div class="centerRight">
            <div class="centerrightOne">
                <a href="aboutUs.html"><img th:src="${modules[9].banners[0].imgUrl1}" /></a>
                <div class="count">
                    <p class="p4">[[${modules[9].banners[0].title}]]</p>
                    <div class="one-container">
                        <div class="one-progress"></div>
                    </div>
                    <p>[[${modules[9].banners[0].description}]]</p>
                </div>
            </div>
            <div class="centerrightTwo">
                <p class="p4">[[${modules[10].module.name}]]</p>
                <div class="two-container">
                    <div class="two-progress"></div>
                </div>
                <div class="centerrightTwos" th:each="user1:${modules[10].banners}">
                    <div class="crtLeft">
                        <a href="#"><img th:src="${user1.imgUrl1}" /></a>
                    </div>
                    <div class="crtRight">[[${user1.description}]]</div>
                </div>
                <!--<div class="centerrightTwos">
                    <div class="crtLeft">
                        <a href="#"><img src="../img/w1.jpg" /></a>
                    </div>
                    <div class="crtRight">
                        Partner up: The fellowship of fitness
                    </div>
                </div>
                <div class="centerrightTwos">
                    <div class="crtLeft">
                        <a href="#"><img src="../img/w11.png" /></a>
                    </div>
                    <div class="crtRight">
                        Best and worst exercises to do when you have a cold
                    </div>
                </div>
                <div class="centerrightTwos">
                    <div class="crtLeft">
                        <a href="#"><img src="../img/w4.png" /></a>
                    </div>
                    <div class="crtRight">
                        Yoga for Rheumatoid Arthritis: Stretching Your Stiffness Away
                    </div>
                </div>-->
            </div>
            <div class="centerrightThree">
                <p class="p4">[[${modules[11].module.name}]]</p>
                <div class="three-container">
                    <div class="three-progress"></div>
                </div>
                <div class="dropdown">
                    <div class="dropbtn">
                        [[${modules[11].module.title}]]
                        <span><img th:src="${modules[11].module.imgUrl1}" /></span>
                    </div>
                    <div class="dropdown-content">
                      <a href="#">[[${modules[11].banners[0].title}]]</a>
                      <a href="#">[[${modules[11].banners[1].title}]]</a>
                      <a href="#">[[${modules[11].banners[2].title}]]</a>
                    </div>
                </div>
            </div>
            <!--centerrightThree-->
            <div class="centerrightFour">
                <p class="p4">[[${modules[12].module.name}]]</p>
                <div class="four-container">
                    <div class="four-progress"></div>
                </div>
                <div class="centerrightFours">
                    <div class="crfOne">
                        <img th:each="i1:${#numbers.sequence(0,2)}" th:src="${modules[12].banners[i1].imgUrl1}" />
                        <!--<img th:src="${modules[12].banners[i1].imgUrl1}" />
                        <img th:src="${modules[12].banners[i1].imgUrl1}" />-->
                    </div>
                    <div class="crfOne">
                        <img th:each="i1:${#numbers.sequence(3,5)}" th:src="${modules[12].banners[i1].imgUrl1}" />
                        <!--<img src="../img/w14.png" />
                        <img src="../img/w9.png" />-->
                    </div>
                    <div class="crfOne">
                        <img th:each="i1:${#numbers.sequence(6,8)}" th:src="${modules[12].banners[i1].imgUrl1}" />
                        <!--<img src="../img/w8.png" />
                        <img src="../img/w11.png" />-->
                    </div>
                    <div class="crfOne">
                        <img th:each="i1:${#numbers.sequence(9,11)}" th:src="${modules[12].banners[i1].imgUrl1}" />
                        <!--<img src="../img/w13.png" />
                        <img src="../img/w10.png" />-->
                    </div>
                </div>
            </div>
            <div class="centerrightFive">
                <p class="p4">[[${modules[13].module.name}]]</p>
                <div class="four-container">
                    <div class="four-progress"></div>
                </div>
                <div class="centerrightFives">
                    <p class="may" th:each="user2:${modules[13].banners}">
                        <span><a href="#">
                            <img th:src="${user2.imgUrl1}"/>[[${user2.title}]]
                        </a></span>
                    </p>
                    <!--<p class="may">
                        <span><a href="#">
                            <img src="../img/right.png"/>May 2015
                        </a></span>
                    </p>
                    <p class="may">
                        <span><a href="#">
                            <img src="../img/right.png"/>May 2015
                        </a></span>
                    </p>
                    <p class="may">
                        <span><a href="#">
                            <img src="../img/right.png"/>May 2015
                        </a></span>
                    </p>-->
                </div>

            </div>

        </div>

      </div>


    </div><!--center-->
    <!--<div class="bottom same">
      <div class="bottom_top center flexs">
        <div class="botTop_left">
          <img src="../img/1_78.png" alt="">
          <p>
            Nam libero tempore,cum soluta nobis esteligendi optio cumque quod maxime
            placeat cum soluta nobis facere possimusnihil impedit quo minus id quod maximeplaceat facere possimus. est eligendioptio cumque
          </p>
          <p>
            facere possimus nihil impedit quo minusid quod maxime placeat facere possimus.
          </p>
        </div>
        <div class="botTop_left">
          <h3>News Letter</h3>
          <div class="one-container">
            <div class="one-progress"></div>
          </div>
          <p>
            facere possimus nihil iimpedit quo minusid quod maxime placeat facere possimus.est eligendi
          </p>
          <input type="text" placeholder="Enter your emall adaress...">
          <button>SUBCRIBE NOW</button>
        </div>
        <div class="botTop_left">
          <h3>News Letter</h3>
          <div class="one-container">
            <div class="one-progress"></div>
        </div>
          <div class="photos flex">
            <img src="../img/1-2_03.png" alt="">
            <img src="../img/1-2_03.png" alt="">
            <img src="../img/1-2_03.png" alt="">

          </div>
        </div>
      </div>
    </div>
    <div class="bottoms same">
      <p>Copyright D 2015.Company name All rights reserved.氧设计</p>
    </div>
  </div>-->


    <div th:include="pub_footer"></div>

<script>
    let maxPage = 0;
    let pageSize = 7;
    function a(num) {
        let page = parseInt(document.getElementById("yema").innerText);
        page +=num;
        if(page<1){
            alert("已经是第一页了")
            return false;
        }
        if(page>maxPage+1){
            alert("已经是最后一页了")
            return false;
        }
        document.getElementById("yema").innerText = page;
        $('.centerLeft').empty()
        console.log(page);
        $.get("/cms_articles",{pageNum:page},function (res){
            let html = "";
            res.rows.forEach(item => {
                html += `<div class="centerleftOne">
                <a href="/page?id=${item.id}"><img src="${item.imgUrl1}" /></a>
                <p class="p3">${item.title}</p>
                <p>${item.description}</p>
                <p>${item.b1}<span>${item.b2}</span></p>
              </div>`
            })
            console.log(html);
            $(".centerLeft").html(html);
        })




    }
    $(function (){
        $.ajax({
            url:"/cms_articles",
            success:function (res){
                maxPage=parseInt(res.total)/pageSize;
                let html = "";
                res.rows.forEach(item => {
                    html += `<div class="centerleftOne">
                    <a href="/page?id=${item.id}"><img src="${item.imgUrl1}" /></a>
                    <p class="p3">${item.title}</p>
                    <p>${item.description}</p>
                    <p>${item.b1}<span>${item.b2}</span></p>
                  </div>`
                })
                console.log(html);
                $(".centerLeft").html(html);
            }
        })


    })





</script>

</body>
</html>
